﻿@page "/splitter/default-functionalities"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Layouts

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This example demonstrates the default functionalities of the Splitter component. To resize panes and increase the dimension of a pane, drag a separator (divider) bar.</p>
</SampleDescription>
<ActionDescription>
   <p>he split panes of the Splitter component can be oriented horizontally or vertically using the <code>Orientation</code> property.
    <ul><li>Set Orientation property to <code>Horizontal</code> to create horizontal splitter, which align panels left-to-right.</li>
        <li>Set Orientation property to <code>Vertical</code> to create vertical splitter, which align panels top-to-bottom.</li>
     </ul></p>
    <p> The splitter allows resizing its panes when the drag separator (divider) bar is used to increase its dimension.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <div class="pane1">
            <div id="pane-heading">Horizontal Splitter</div>
            <SfSplitter CssClass="out-splitter" Height="110px" Width="100%" SeparatorSize="4">
                <SplitterPanes>
                    <SplitterPane Size="25%" Min="60px">
                        <ContentTemplate>
                            <div class='splitter-default-content'><div>Left pane<div id='panetext'>size: 25%</div><div id='panetext'>min: 60px</div></div></div>
                        </ContentTemplate>
                    </SplitterPane>
                    <SplitterPane Size="50%" Min="60px">
                        <ContentTemplate>
                            <div class='splitter-default-content'><div>Middle pane<div id='panetext'>size: 50%</div><div id='panetext'>min: 60px</div></div></div>
                        </ContentTemplate>
                    </SplitterPane>
                    <SplitterPane Size="25%" Min="60px">
                        <ContentTemplate>
                            <div class='splitter-default-content'><div>Right pane<div id='panetext'>size: 25%</div><div id='panetext'>min: 60px</div></div></div>
                        </ContentTemplate>
                    </SplitterPane>
                </SplitterPanes>
            </SfSplitter>
        </div>
        <div class="pane2">
            <div id="pane-heading">Vertical Splitter</div>
            <SfSplitter CssClass="in-splitter" Height="240px" Width="100%" Orientation="Orientation.Vertical" SeparatorSize="4">
                <SplitterPanes>
                    <SplitterPane Size="25%" Min="60px">
                        <ContentTemplate>
                            <div class='splitter-default-content'><div>Top pane<div id='panetext'>size: 30%</div><div id='panetext'>min: 60px</div></div></div>
                        </ContentTemplate>
                    </SplitterPane>
                    <SplitterPane Size="50%" Min="60px">
                        <ContentTemplate>
                            <div class='splitter-default-content'><div>Middle pane<div id='panetext'>size: 45%</div><div id='panetext'>min: 60px</div></div></div>
                        </ContentTemplate>
                    </SplitterPane>
                    <SplitterPane Size="25%" Min="60px">
                        <ContentTemplate>
                            <div class='splitter-default-content'><div>Bottom pane<div id='panetext'>size: 25%</div><div id='panetext'>min: 60px</div></div></div>
                        </ContentTemplate>
                    </SplitterPane>
                </SplitterPanes>
            </SfSplitter>
        </div>
    </div>
</div>

<style>
    #panetext {
        font-size: 11px;
    }

    #pane-heading {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .pane1 {
        margin: 20px auto;
        max-width: 440px;
    }

    .pane2 {
        margin: 20px auto;
        max-width: 440px;
    }

    .control-section {
        min-height: 370px;
        margin-bottom: 15px;
        margin-top: 10px;
    }

    .out-splitter .e-pane, .in-splitter .e-pane {
        text-align: center;
        align-items: center;
        justify-content: center;
        display: grid;
        height: 100%;
    }
</style>